<template>
  <div class="it-table">
      <div class="text-right mar-b-10px">
        <div style="display: flex;justify-content: flex-end">
          <el-input placeholder="请输入内容" v-model="searchWord"  size="mini" style="width: 250px">
            <el-button slot="append" icon="el-icon-search" ></el-button>
          </el-input>
          <el-button size="mini" type="success" style="display: inline-block;margin-left: 10px" @click="buildCode">生成代码</el-button>
        </div>
      </div>
      <el-row style="color: #606266;" :gutter="8" v-if="tableNames.length > 0">
        <el-checkbox :indeterminate="isIndeterminate" v-model="allCheck" @change="handleCheckAllChange" class="mar-b-10px">全选</el-checkbox>
        <el-checkbox-group v-model="checkList" @change="handleCheckedChange">
          <el-checkbox v-for="n in tableNames" :label="n" :key="n">{{n}}</el-checkbox>
        </el-checkbox-group>
      </el-row>
    <DialogTable :columns="columns" :table-config="dialogTableConfig" v-model="dialogTableStatus" @submit="submit"></DialogTable>
  </div>
</template>

<script>
import Service from "api/Service";
import http from "network/http";
import util from "utils/util";

export default {
  name: "ITTable" ,
  props:{
    dsId: "" ,
    data:{
      type: Array,
      required: true
    }
  },
  data(){
    return {
      searchWord: '',
      checkList:[] ,
      allCheck: false ,
      isIndeterminate: false ,
      dialogTableStatus: false ,
      api:{
        genCode: `${Service.itToolService}/gen/code`
      }
    }
  },
  created() {
  },
  mounted() {
  },
  watch:{
  },
  computed:{
    tableNames(){
      return this.data.map((item)=>item.label)
    },
    dialogTableConfig(){
      return {
        url: `${Service.itToolService}/toolProject/listByPage`,
        lazy: true,
        method: 'post'
      }
    },
    columns(){
      return [
        {
          key: 'projectTitle',
          title: '项目名称',
          search: true
        },
        {
          key: 'packageName',
          title: '包名称',
        },
        {
          key: 'tablePrefix',
          title: '表前缀',
        },
        {
          key: 'author',
          title: '作者',
        },
        {
          key: 'email',
          title: '邮箱',
        },
      ]
    }
  },
  methods:{
    submit(row){
      http.download(this.api.genCode , {
        dsId: this.dsId ,
        tableName: this.checkList ,
        projectId: row.projectId
      }).then(blob=>{
        util.downLoad(blob , `${row.projectTitle}.zip`)
      })
    },
    handleCheckAllChange(val) {
      this.checkList = val ? this.tableNames : [];
      this.isIndeterminate = false;
    },
    handleCheckedChange(value) {
      let checkedCount = value.length;
      this.allCheck = checkedCount === this.tableNames.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.tableNames.length;
    },
    buildCode(){
      if(this.checkList.length === 0){
        this.$message.error("请选择表");
        return
      }
      this.dialogTableStatus = true ;
      // this.$emit("buildCode",this.checkList)
    }
  },
}
</script>

<style scoped>
.mar-b-10px{
  margin-bottom: 10px;
}
</style>
